<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: pink;
            width: 800px;
            height: 800px;
            position: relative;
        }

        .menban {
            position: absolute;
            background-color: rgba(219, 154, 108, 0.435);
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="menban">

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const box = document.querySelector('.box')
            const menban = document.querySelector('.menban')

            box.addEventListener('mousemove', function (e) {
                let weizi = box.getBoundingClientRect();
                const maskSize = menban.offsetWidth / 2; // 蒙版半径

                let mouserX = e.clientX - weizi.left;
                let mouserY = e.clientY - weizi.top;

                let newLeft = mouserX - maskSize;
                let newTop = mouserY - maskSize;

                // 限制蒙版位置，确保它不会超出盒子的左边界或上边界
                newLeft = Math.max(0, newLeft);
                newTop = Math.max(0, newTop);

                // 限制蒙版位置，确保它不会超出盒子的右边界或下边界
                newLeft = Math.min(weizi.width - menban.offsetWidth, newLeft);
                newTop = Math.min(weizi.height - menban.offsetHeight, newTop);
                // console.log(mouserX, mouserY);
                // // 确保鼠标在蒙版中心
                // const menbanCenterX = mouserX - menban.offsetWidth / 2;
                // const menbanCenterY = mouserY - menban.offsetHeight / 2;

                // 设置蒙版位置

                menban.style.left = `${newLeft}px`;
                menban.style.top = `${newTop}px`;



            })
        })
    </script>
</body>

</html>